<template>
  <div class="fast-property">
    <!-- 快递点属性查询 -->
    <PagePanel :panelTitle="activePanel.panelTitle" @clickClose="clickClose">
      <el-input
        clearable
        v-model="keyWord"
        @change="searchFast"
        @clear="searchFast"
        placeholder="输入快递点关键字"
      ></el-input>
      <div class="list-content">
        <el-card
          style="margin-top: 10px"
          class="box-card"
          v-for="item in fastPropertySearchData"
          :key="item.id"
        >
          <div class="box-item">
            <div>
              <span style="font-weight: 700">快递点属性信息:</span>
              <el-link
                style="margin-left: 96px"
                title="定位"
                :underline="false"
                class="el-icon-map-location"
                type="primary"
                @click="locationTo(item)"
              ></el-link>
            </div>

            <div class="box-item-item">
              <span
                ><span style="font-weight: 700">名称：</span> :{{
                  item.name
                }}</span
              >
            </div>
            <div class="box-item-item">
              <span
                ><span style="font-weight: 700">地址：</span> :{{
                  item.address
                }}</span
              >
            </div>
            <!-- <div class="box-item-item">
              <span
                ><span style="font-weight: 700">位置：</span> :{{
                  item.position
                }}</span
              >
            </div> -->
            <div class="box-item-item">
              <span
                ><span style="font-weight: 700">经度：</span> :{{
                  item.lotLat[0]
                }}</span
              >
            </div>
            <div class="box-item-item">
              <span
                ><span style="font-weight: 700">纬度：</span> :{{
                  item.lotLat[1]
                }}</span
              >
            </div>
            <!-- <div>{{ item.name }}-{{ item.address }}-{{ item.position }}</div> -->
          </div>
        </el-card>
        <el-card style="margin-top: 15px; overflow: auto">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="pagination.page"
            :page-size="pagination.pageSize"
            layout="total, prev, pager, next"
            :total="pagination.total"
          >
          </el-pagination>
        </el-card>
      </div>
    </PagePanel>
  </div>
</template>

<script>
import PagePanel from "@/components/PagePanel";
import request from "@/utils/request.js";
import { getDeliveryList } from "@/api/home";
import markerImg from "../../../assets/img/fastSpaceSerach.png";
export default {
  name: "FastPropertySearch",
  components: { PagePanel },
  data() {
    return {
      keyWord: "",
      fastPropertySearchData: null, //快递点数据
      pagination: {
        total: 50,
        pageSize: 10,
        page: 1,
      },
    };
  },
  computed: {
    activePanel() {
      return this.$store.state.activePanel;
    },
  },
  mounted() {
    this.getFastPorpertySearchData();
  },
  methods: {
    async getFastPorpertySearchData() {
      const params = {
        page: this.pagination.page,
        pageSize: this.pagination.pageSize,
        daima: this.value,
        name: this.keyWord.trim(),
      };
      const res = await getDeliveryList(params);
      if (res.code === 20000 && res.data !== 0) {
        const info = JSON.parse(res.data);
        this.fastPropertySearchData = info.data.map((item) => {
          const temp = item.position.split(",");
          item.lotLat = [Number(temp[0]), Number(temp[1])];
          return item;
        });

        this.pagination.total = info.count;
      } else {
        this.$message.info(res.msg);
      }
    },
    searchFast() {
      this.pagination.page = 1;
      this.getFastPorpertySearchData();
    },
    handleCurrentChange() {
      this.pagination.page = val;
      this.getFastPorpertySearchData();
    },
    removeDeliveryBillboard() {
      const flag = cesiumViewer.entities.getById("deliveryBillboard");
      if (flag) {
        cesiumViewer.entities.removeById("deliveryBillboard");
      }
    },
    locationTo(item) {
      const location = Cesium.Cartesian3.fromDegrees(...item.lotLat);
      // window.cesiumViewer.camera.flyTo({
      //   destination: location,
      //   duration: 2,
      // });
      this.removeDeliveryBillboard();
      let entity = cesiumViewer.entities.add({
        id: "deliveryBillboard",
        position: location,
        // label: {
        //   font: "20px Helvetica", //设置文字大小和字体
        //   text: pick.primitive.properties.BiaoZhunMin,
        //   pixelOffset: new Cesium.Cartesian2(0, -90),
        // },
        billboard: {
          width: 80,
          height: 80,
          image: markerImg,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        },
      });

      cesiumViewer.flyTo(entity);
    },

    clickClose() {
      console.log("@@@@@@@@@@@@", this.activePanel);
    },
  },
  beforeDestroy() {
    this.removeDeliveryBillboard();
    //因为面板都是用的v-if，会销毁面板，需要销毁的事件也可以写这里
  },
};
</script>
<style lang="less" scoped>
.fast-property {
  .list-content {
    height: calc(100% - 30px);
    overflow-y: auto;
    .box-item {
      display: flex;
      flex-direction: column;
      // justify-content: space-between;
      .box-item-item {
        margin: 5px 0;
      }
    }
  }
}
</style>
